<template>
	<view class="comics">
		<!-- <view class="loading-text" v-if="!init">正在加载...</view> -->
		<u-empty margin-top="32" v-if="init && list.length === 0"></u-empty>
		<view class="item" v-for="item in list" :key="item.id">
			<view class="head">
				<img class="avatar" :src="item.avatar" alt="">
				<view>
					<view>
						<view class="username">{{ item.nickname || item.username }}</view>
						<view class="time">{{ item.mtime }}</view>
					</view>
				</view>
			</view>
			
			<view class="content">{{ item.intro }}</view>
			
			<view class="container">
				<view v-for="(_item, _index) in item.images.slice(0, 3)">
					<view class="img-box" v-if="_index === 2" @click="_previewImage(item.images, _index)">
						<image class="img" :src="_item" mode="aspectFill"></image>
						<view class="text-box" v-if="item.images.length - 3">+ {{ item.images.length - 3 }}</view>
					</view>
					<image class="img" :class="{'mr-0': _index === item.images.slice(0, 3).length - 1}" :src="_item" mode="aspectFill" @click="_previewImage(item.images, _index)" v-else></image>
				</view>
			</view>
			<u-line/>
			
			<view class="foot">
				<view class="foot-item">
					<u-icon name="share" color="#606266" size="32"></u-icon>
					<text class="item-text">{{ item.share_num_str }}</text>
				</view>
				<view class="foot-item">
					<u-icon name="chat" color="#606266" size="32"></u-icon>
					<text class="item-text">{{ item.comment_num_str }}</text>
				</view>
				<view class="foot-item">
					<u-icon name="thumb-up" color="#606266" size="32"></u-icon>
					<text class="item-text">{{ item.like_num_str }}</text>
				</view>
			</view>
		</view>
		
		<view class="tabbar">
			<tabbar />
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Tabbar from '@/components/v-tabbar/v-tabbar.nvue'
	import { ArticleList } from '@/common/api.js'

	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				list: [],
				isLastPage: false,
				init: false
			}
		},
		onLoad() {
			this._list()
		},
		onShow() {
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {
			this._list()
		},
		onReachBottom() {
			if (this.isLastPage) return
			this.page++
			this._list()
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		onNavigationBarButtonTap() {
			if (this.isLogin) {
				uni.navigateTo({ url: '/pages/Comics/Publish' })
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					success() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			}
		},
		methods: {
			_list() {
				ArticleList({
					page: this.page,
					limit: 10,
					type: 4
				}).then(({ code, data }) => {
					this.init = true
					if (code === 200) {
						const { list, total_page, current_page } = data
						if (current_page === 1) {
							this.list = list
						} else {
							this.list = this.list.concat(list)
						}
						if (current_page >= total_page) {
							this.isLastPage = true
						}
					}
					uni.stopPullDownRefresh()
				})
			},
			_previewImage(urls, current) {
				uni.previewImage({
					urls,
					current
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading-text {
		text-align: center;
		padding-top: 32rpx;
		color: #909399;
	}
	.text-box {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
	}
	.img-box {
		position: relative;
	}
	.item-text {
		margin-left: 12rpx;
		color: #606266;
	}
	.foot-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.foot {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
	}
	.content {
		margin-bottom: 24rpx;
	}
	.mr-0 {
		margin-right: 0;
	}
	.container {
		margin-bottom: 16rpx;
		display: flex;
		margin-bottom: 24rpx;
	}
	.img {
		margin-right: 10rpx;
		width: 227.33rpx;
		height: 227.33rpx;
	}
	.time {
		color: #909399;
		font-size: 24rpx;
	}
	.username {
		font-size: 32rpx;
	}
	.head {
		display: flex;
		margin-bottom: 30rpx;
	}
	.item {
		padding: 24rpx 24rpx 0;
		background-color: #fff;
		margin-top: 16rpx;
	}
	.avatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.text-center {
		text-align: center;
		padding: 32rpx 0;
	}

	.tabbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #fff;
	}
	.comics {
		padding-bottom: 50px;
	}
</style>
